
            <link rel="stylesheet" href="<?= base_url() ?>css/cms/generator.css">
            <script>
                $(function() {
                    $( "#sortable" ).sortable({
                        handle: '.handle'
                    });
                });
            </script>
            <div id="ajax_container">
                <div class="container-fluid">
                    <div class="page-header">
                        <div class="pull-left">
                            <h1><?= $template['title'] ?></h1>
                        </div>
                    </div>
                    <?= $this->breadcrumb->output(); ?>
                    
                    <div id="content-area" class="row-fluid">
                        
                        <div class="span2">
                            <div class="box box-bordered">
                                <div class="box-title">
                                    <h3>
                                        <i class="icon-reorder"></i>
                                        Generic
                                    </h3>
                                    <div class="actions">
                                        <a href="#" class="btn btn-mini content-slideUp"><i class="icon-angle-down"></i></a>
                                    </div>
                                </div>
                                <div id="generic_btn_elements" class="box-content text-center">
                                    <button id="generic_text_btn" class="btn text-left"><i class="icon-edit"></i> Text Input</button>
                                    <button id="generic_longtext_btn" class="btn text-left"><i class="icon-file-alt"></i> Long Text</button>
                                    <button id="generic_datetime_btn" class="btn text-left"><i class="icon-calendar"></i> Date &amp; Time</button>
                                    <button id="generic_single_btn" class="btn text-left"><i class="icon-list-alt"></i> Single Data</button>
                                    <button id="generic_multiple_btn" class="btn text-left"><i class="icon-tags"></i> Multiple Data</button>
                                    <button id="generic_file_uploader_btn" class="btn text-left"><i class="icon-upload-alt"></i> File Uploader</button>
                                    <button id="generic_color_btn" class="btn text-left"><i class="icon-tint"></i> Color Picker</button>
                                    <button id="generic_geolocation_btn" class="btn text-left"><i class="icon-map-marker"></i> Geolocation</button>
                                    <button id="generic_toggle_btn" class="btn text-left"><i class="icon-check"></i> Toggle</button>
                                    <button id="generic_captcha_btn" class="btn text-left"><i class="icon-camera"></i> Captcha</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="span8">
                            <div class="box box-bordered">
                                <div class="box-title">
                                    <h3>
                                        <i class="icon-reorder"></i>
                                        Form WYSIWYG
                                    </h3>
                                    <div class="actions">
                                        <a href="#" class="btn btn-mini content-slideUp"><i class="icon-angle-down"></i></a>
                                    </div>
                                </div>
                                <div class="box-content">
                                    <div id="wysiwyg_form_guideline" class="alert alert-info">
                                        <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                                    </div>
                                    <form id="bb" action="<?= base_url() ?>generator/generate" method="post" class='form-horizontal form-bordered form-validate'>
                                        <ul id="sortable"></ul>
                                        <div class="form-actions">
                                            <input type="submit" id="btn_save" class="btn" value="Save">
                                        </div>
                                    </form>
                                </div>
                            </div>
                                
                            <div class="box box-bordered">
                                <div class="box-title">
                                    <h3>
                                        <i class="icon-reorder"></i>
                                        Form Metadata
                                    </h3>
                                    <div class="actions">
                                        <a href="#" class="btn btn-mini content-slideUp"><i class="icon-angle-down"></i></a>
                                    </div>
                                </div>
                                <div class="box-content">
                                    <div class="alert alert-info">
                                        <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                                    </div>
                                    <form id="form_form" action="<?= base_url() ?>generator/generate" method="post" class="form-horizontal form-bordered form-validate">
                                        <div class="control-group">
                                            <label for="content_singular_name" class="control-label handle">Singular Name *</label>
                                            <div class="controls">
                                                <div class="input-append input-prepend">
                                                    <span class="add-on"><i class="icon-edit"></i></span>
                                                    <input type="text" name="singular_name" id="content_singular_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="Product">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label for="content_plural_name" class="control-label handle">Plural Name *</label>
                                            <div class="controls">
                                                <div class="input-append input-prepend">
                                                    <span class="add-on"><i class="icon-edit"></i></span>
                                                    <input type="text" name="plural_name" id="content_plural_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="Products">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label for="has_gallery" class="control-label handle">Gallery</label>
                                            <div class="controls">
                                                <label class="checkbox">
                                                    <input type="checkbox" name="has_gallery" id="has_gallery">
                                                    <small>Check to have image gallery</small>
                                                </label>
                                            </div>
                                        </div>
                                            
                                        <div id="status_type_container" class="control-group">
                                            <label for="status_type" class="control-label handle">Status Type</label>
                                            <div class="controls">
                                                <select name="status" id="status_type" class="valid xinput-large">
                                                    <option value="hidden">Hidden</option>
                                                    <option value="default" selected>Default - active/inactive/archived</option>
                                                    <option value="toggle">Toggle - active/inactive</option>
                                                    <option value="accept">Accept - accept/decline</option>
                                                    <option value="custom">Custom</option>
                                                </select>
                                            </div>
                                        </div>
                                            
                                        <div id="custom_active_container" class="control-group">
                                            <label for="custom_active" class="control-label handle">Custom Active State Name *</label>
                                            <div class="controls">
                                                <div class="input-append input-prepend">
                                                    <span class="add-on"><i class="icon-edit"></i></span>
                                                    <input type="text" name="custom_active" id="custom_active" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="accepted">
                                                </div>
                                            </div>
                                        </div>
                                        <div id="custom_inactive_container" class="control-group">
                                            <label for="custom_inactive" class="control-label handle">Custom Inactive State Name *</label>
                                            <div class="controls">
                                                <div class="input-append input-prepend">
                                                    <span class="add-on"><i class="icon-edit"></i></span>
                                                    <input type="text" name="custom_inactive" id="custom_inactive" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="declined">
                                                </div>
                                            </div>
                                        </div>
                                        <div id="custom_archived_container" class="control-group">
                                            <label for="custom_archived" class="control-label handle">Custom Archived State Name *</label>
                                            <div class="controls">
                                                <div class="input-append input-prepend">
                                                    <span class="add-on"><i class="icon-edit"></i></span>
                                                    <input type="text" name="custom_archived" id="custom_archived" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="blocked">
                                                </div>
                                            </div>
                                        </div>
                                            
                                        <div class="control-group">
                                            <label for="database_name" class="control-label handle">Database Name *</label>
                                            <div class="controls">
                                                <div class="input-append input-prepend">
                                                    <span class="add-on"><i class="icon-edit"></i></span>
                                                    <input type="text" name="database_name" id="database_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="fashiontv">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label for="database_prefix" class="control-label handle">Database Prefix</label>
                                            <div class="controls">
                                                <div class="input-append input-prepend">
                                                    <span class="add-on"><i class="icon-edit"></i></span>
                                                    <input type="text" name="database_prefix" id="database_prefix" class="input-xlarge" data-rule-minlength="1" placeholder="ftv">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label for="form_guideline" class="control-label handle">Form GuideLine</label>
                                            <div class="controls">
                                                <textarea name="guideline" id="form_guideline" class="span12" row="5" data-rule-maxlength="255" placeholder="More Guidelines Here"><i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.</textarea>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    
                        <div class="span2">
                            <div class="box box-bordered">
                                <div class="box-title">
                                    <h3>
                                        <i class="icon-reorder"></i>
                                        Elements
                                    </h3>
                                    <div class="actions">
                                        <a href="#" class="btn btn-mini content-slideUp"><i class="icon-angle-down"></i></a>
                                    </div>
                                </div>
                                <div id="btn_elements" class="box-content text-center">
                                    <button id="text_btn" class="btn text-left"><i class="icon-edit"></i> Text Input</button>
                                    <button id="number_btn" class="btn text-left"><i class="icon-plus"></i> Number Input</button>
                                    <button id="email_btn" class="btn text-left"><i class="icon-envelope"></i> Email</button>
                                    <button id="url_btn" class="btn text-left"><i class="icon-globe"></i> URL</button>
                                    <button id="password_btn" class="btn text-left"><i class="icon-lock"></i> Password</button>
                                    <button id="textarea_btn" class="btn text-left"><i class="icon-file-alt"></i> Textarea</button>
                                    <button id="wysiwyg_btn" class="btn text-left"><i class="icon-align-center"></i> WYSIWYG</button>

                                    <button id="time_btn" class="btn text-left"><i class="icon-time"></i> Time</button>
                                    <button id="date_btn" class="btn text-left"><i class="icon-calendar"></i> Date</button>
                                    <button id="daterange_btn" class="btn text-left"><i class="icon-calendar"></i> Date Range</button>
                                    <button id="datetime_btn" class="btn text-left"><i class="icon-calendar"></i> Date &amp; Time</button>
                                    <button id="datetimerange_btn" class="btn text-left"><i class="icon-calendar"></i> Date &amp; Time Range</button>
                                    <button id="timezone_btn" class="btn text-left"><i class="icon-time"></i> Timezone</button>

                                    <button id="radio_btn" class="btn text-left"><i class="icon-circle-blank"></i> Radio Button</button>
                                    <button id="single_dropdown_btn" class="btn text-left"><i class="icon-list-alt"></i> Single Dropdown</button>

                                    <button id="multiple_dropdown_btn" class="btn text-left"><i class="icon-list-alt"></i> Multiple Dropdown</button>
                                    <button id="checkbox_btn" class="btn text-left"><i class="icon-check-empty"></i> Checkbox</button>
                                    <button id="tagsinput_btn" class="btn text-left"><i class="icon-tags"></i> Tagsinput</button>

                                    <button id="file_upload_btn" class="btn text-left"><i class="icon-upload-alt"></i> File Upload</button>
                                    <button id="image_upload_btn" class="btn text-left"><i class="icon-picture"></i> Image Upload</button>
                                    <button id="url_upload_btn" class="btn text-left"><i class="icon-globe"></i> Url Upload</button>
                                    <button id="multiple_upload_btn" class="btn text-left"><i class="icon-upload"></i> Multiple Upload</button>

                                    <button id="color_btn" class="btn text-left"><i class="icon-tint"></i> Color Picker</button>
                                    <button id="geolocation_btn" class="btn text-left"><i class="icon-map-marker"></i> Geolocation</button>
                                    
                                    <button id="toggle_btn" class="btn text-left"><i class="icon-check"></i> Switch</button>
                                    <button id="captcha_btn" class="btn text-left"><i class="icon-camera"></i> Captcha</button>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    
                    <!-- Text -->
                    <div id="text_input_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div id="text_modal_header" class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="text_modal_title">Text Input</h3>
                        </div>
                        <div id="text_modal_body" class="modal-body row-fluid">
                            <div class="alert alert-info">
                                <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                            </div>
                            <form id="text_input_form" action="<?= base_url() ?>generator/generate" method="post" class='form-horizontal form-column form-bordered form-validate'>
                                <div class="span6">
                                    <div class="control-group">
                                        <label for="text_label" class="control-label handle">Label*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="label" id="text_label" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="Title">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="text_name" class="control-label handle">Field Name*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="name" id="text_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="title">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="text_id" class="control-label handle">Field ID*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="id" id="text_id" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="title">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="text_placeholder" class="control-label handle">Placeholder</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="placeholder" id="text_placeholder" class="input-xlarge" data-rule-minlength="1" value="" placeholder="This is a title field">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="text_initial_value" class="control-label handle">Initial Value</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="initial_value" id="text_initial_value" class="input-xlarge" data-rule-minlength="1" value="" placeholder="Initial Value">
                                            </div>
                                        </div>
                                    </div>

                                    <div id="text_type_container" class="control-group">
                                        <label for="text_type" class="control-label handle">Field Type*</label>
                                        <div class="controls">
                                            <select name="type" id="text_type" class="valid">
                                                <option value="text" selected>Text</option>
                                                <option value="number">Number</option>
                                                <option value="email">Email</option>
                                                <option value="url">URL</option>
                                                <option value="password">Password</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="control-group" id="text_use_spinner">
                                        <label for="text_spinner" class="control-label handle">Spinner</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="spinner" id="text_spinner" class="input-xlarge" data-rule-minlength="1" data-rule-maxlength="10" data-rule-number="true" placeholder="Step">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group" id="text_confirm_password">
                                        <label for="text_icon" class="control-label handle">Confirm</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="confirm_password" id="confirm_password" type="checkbox" checked> With Confirm Password
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group" id="text_db_type_container">
                                        <label for="text_db_type" class="control-label handle">Data Type*</label>
                                        <div class="controls">
                                            <select name="db_type" id="text_db_type" class="valid">
                                                <option class="text" value="char">Char</option>
                                                <option class="text" value="varchar">Varchar</option>
                                                <option class="text" value="tinytext">Tiny Text</option>
                                                <option class="text" value="text">Text</option>
                                                <option class="text" value="mediumtext">Medium Text</option>
                                                <option class="text" value="longtext">Long Text</option>
                                                <option class="numeric" value="tinyint">Tiny Integer</option>
                                                <option class="numeric" value="smallint">Small Integer</option>
                                                <option class="numeric" value="int">Integer</option>
                                                <option class="numeric" value="mediumint">Medium Integer</option>
                                                <option class="numeric" value="bigint">Big Integer</option>
                                                <option class="numeric" value="decimal">Decimal</option>
                                                <option class="numeric" value="double">Double</option>
                                                <option class="numeric" value="float">Float</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="text_min_length" class="control-label handle">Min Length*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="min_length" id="text_min_length" class="input-xlarge" data-rule-required="true" data-rule-number="true" data-rule-minlength="1" value="2" placeholder="minimum length">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="text_max_length" class="control-label handle">Max Length*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="max_length" id="text_max_length" class="input-xlarge" data-rule-required="true" data-rule-number="true" data-rule-minlength="1" value="1000" placeholder="maximum length">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="span6">
                                    <div class="control-group" id="text_validations">
                                        <label class="control-label handle">Validations</label>
                                        <div class="controls">
                                            <div class="row-fluid">
                                                <div class="span6">
                                                    <label class="checkbox">
                                                        <input name="validations[]" id="text_trim" type="checkbox" checked value="trim"> Trim
                                                    </label>
                                                    <label class="checkbox">
                                                        <input name="validations[]" id="text_required" type="checkbox" checked value="required"> Required
                                                    </label>
                                                    <label class="checkbox">
                                                        <input name="validations[]" id="text_xss_clean" type="checkbox" checked value="xss_clean"> XSS Clean
                                                    </label>
                                                </div>
                                                <div class="span6">
                                                    <label class="checkbox">
                                                        <input name="validations[]" id="text_numeric" type="checkbox" value="numeric" disabled> Numeric
                                                    </label>
                                                    <label class="checkbox">
                                                        <input name="validations[]" id="text_valid_email" type="checkbox" value="valid_email" disabled> Valid Email
                                                    </label>
                                                    <label class="checkbox">
                                                        <input name="validations[]" id="text_valid_url" type="checkbox" value="valid_url" disabled> Valid URL
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="text_show_list" class="control-label handle">Show on List</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="show_list" id="text_show_list" type="checkbox" checked> Show on List
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="text_searchable" class="control-label handle">Searchable</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="searchable" id="text_searchable" type="checkbox" checked> Searchable
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="text_show_api" class="control-label handle">Show on API</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="show_api" id="text_show_api" type="checkbox" checked> Show on API
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="text_icon" class="control-label handle">Use Icon</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="icon" id="text_icon" type="checkbox" checked> Use Icon
                                            </label>
                                        </div>
                                    </div>
                                    <div id="text_change_icon_container" class="control-group">
                                        <label for="text_change_icon" class="control-label handle">Change Icon</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="change_icon" id="text_change_icon" class="input-xlarge" data-rule-minlength="1" value="" placeholder=" &lt;i class='icon-edit'&gt;&lt;/i&gt; or $">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label for="text_guideline" class="control-label handle">User Guideline</label>
                                        <div class="controls">
                                            <textarea name="guideline" id="text_guideline" row="5" data-rule-maxlength="255" placeholder="Type Here"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div id="text_modal_footer" class="modal-footer">
                            <button id="text_close_btn" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                            <button id="text_save_btn" class="btn btn-primary">Create Text Input</button>
                        </div>
                    </div>
                    
                    <!-- Textarea -->
                    <div id="textarea_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div id="textarea_modal_header" class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="textarea_modal_title">Long Text Input</h3>
                        </div>
                        <div id="textarea_modal_body" class="modal-body row-fluid">
                            <div class="alert alert-info">
                                <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                            </div>
                            <form id="textarea_form" action="<?= base_url() ?>generator/generate" method="post" class='form-horizontal form-column form-bordered form-validate'>
                                <div class="span6">
                                    <div class="control-group">
                                        <label for="textarea_label" class="control-label handle">Label*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="label" id="textarea_label" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="Content">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="textarea_name" class="control-label handle">Field Name*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="name" id="textarea_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="content">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="textarea_id" class="control-label handle">Field ID*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="id" id="textarea_id" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="content">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="textarea_placeholder" class="control-label handle">Placeholder</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="placeholder" id="textarea_placeholder" class="input-xlarge" data-rule-minlength="1" value="" placeholder="Very Long Text">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="textarea_initial_value" class="control-label handle">Initial Value</label>
                                        <div class="controls">
                                            <textarea name="initial_value" id="textarea_initial_value" row="5" data-rule-maxlength="10000" placeholder="Initial Value"></textarea>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="textarea_min_length" class="control-label handle">Min Length*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="min_length" id="textarea_min_length" class="input-xlarge" data-rule-required="true" data-rule-number="true" data-rule-minlength="1" value="2" placeholder="minimum length">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="textarea_max_length" class="control-label handle">Max Length*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="max_length" id="textarea_max_length" class="input-xlarge" data-rule-required="true" data-rule-number="true" data-rule-minlength="1" value="10000" placeholder="maximum length">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="textarea_type_container" class="control-group">
                                        <label for="textarea_type" class="control-label handle">Field Type*</label>
                                        <div class="controls">
                                            <select name="type" id="textarea_type" class="valid">
                                                <option value="textarea" selected>Textarea</option>
                                                <option value="wysiwyg">WYSIWYG</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="span6">
                                    <div class="control-group" id="textarea_db_type_container">
                                        <label for="textarea_db_type" class="control-label handle">Data Type*</label>
                                        <div class="controls">
                                            <select name="db_type" id="textarea_db_type" class="valid">
                                                <option class="text" value="varchar">Varchar</option>
                                                <option class="text" value="text">Text</option>
                                                <option class="text" value="mediumtext">Medium Text</option>
                                                <option class="text" value="longtext">Long Text</option>
                                                <option class="text" value="tinyblob">Tiny Blob</option>
                                                <option class="text" value="mediumblob">Medium Blob</option>
                                                <option class="text" value="blob">Blob</option>
                                                <option class="text" value="longblobb">Long Blob</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label handle">Validations</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="trim"> Trim
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="required"> Required
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="xss_clean"> XSS Clean
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="textarea_show_list" class="control-label handle">Show on List</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="show_list" id="textarea_show_list" type="checkbox" checked> Show on List
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="textarea_searchable" class="control-label handle">Searchable</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="searchable" id="textarea_searchable" type="checkbox"> Searchable
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="textarea_show_api" class="control-label handle">Show on API</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="show_api" id="textarea_show_api" type="checkbox" checked> Show on API
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="textarea_guideline" class="control-label handle">User Guideline</label>
                                        <div class="controls">
                                            <textarea name="guideline" id="textarea_guideline" rows="4" data-rule-maxlength="255" placeholder="Type Here"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div id="modal_footer" class="modal-footer">
                            <button id="textarea_close_btn" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                            <button id="textarea_save_btn" class="btn btn-primary">Create Textarea</button>
                        </div>
                    </div>
                    
                    <!-- Datetime -->
                    <div id="datetime_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div id="datetime_modal_header" class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="datetime_modal_title">Datetime</h3>
                        </div>
                        <div id="datetime_modal_body" class="modal-body row-fluid">
                            <div class="alert alert-info">
                                <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                            </div>
                            <form id="datetime_form" action="<?= base_url() ?>contact/update" method="post" class='form-horizontal form-column form-bordered form-validate'>
                                <div class="span6">
                                    <div class="control-group">
                                        <label for="datetime_label" class="control-label handle">Label*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="label" id="datetime_label" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="Date">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="datetime_name" class="control-label handle">Field Name*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="name" id="datetime_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="date">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="datetime_id" class="control-label handle">Field ID*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="id" id="datetime_id" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="date">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="datetime_placeholder" class="control-label handle">Placeholder</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="placeholder" id="datetime_placeholder" class="input-xlarge" data-rule-minlength="1" value="" placeholder="10:30 AM">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="datetime_initial_value_container" class="control-group">
                                        <label for="datetime_initial_value" class="control-label handle">Initial Value</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="initial_value" id="datetime_initial_value" class="input-xlarge" data-rule-minlength="1" value="" placeholder="10:30 AM">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="datetime_initial_value_dropdown_container" class="control-group">
                                        <label for="datetime_initial_value" class="control-label handle">Initial Value</label>
                                        <div class="controls">
                                            <select name="initial_value_dropdown" id="datetime_initial_value_dropdown">
                                                <option value="UM12">(UTC -12:00) Baker/Howland Island</option>
                                                <option value="UM11">(UTC -11:00) Samoa Time Zone, Niue</option>
                                                <option value="UM10">(UTC -10:00) Hawaii-Aleutian Standard Time, Cook Islands, Tahiti</option>
                                                <option value="UM95">(UTC -9:30) Marquesas Islands</option>
                                                <option value="UM9">(UTC -9:00) Alaska Standard Time, Gambier Islands</option>
                                                <option value="UM8">(UTC -8:00) Pacific Standard Time, Clipperton Island</option>
                                                <option value="UM7">(UTC -7:00) Mountain Standard Time</option>
                                                <option value="UM6">(UTC -6:00) Central Standard Time</option>
                                                <option value="UM5">(UTC -5:00) Eastern Standard Time, Western Caribbean Standard Time</option>
                                                <option value="UM45">(UTC -4:30) Venezuelan Standard Time</option>
                                                <option value="UM4">(UTC -4:00) Atlantic Standard Time, Eastern Caribbean Standard Time</option>
                                                <option value="UM35">(UTC -3:30) Newfoundland Standard Time</option>
                                                <option value="UM3">(UTC -3:00) Argentina, Brazil, French Guiana, Uruguay</option>
                                                <option value="UM2">(UTC -2:00) South Georgia/South Sandwich Islands</option>
                                                <option value="UM1">(UTC -1:00) Azores, Cape Verde Islands</option>
                                                <option value="UTC">(UTC) Greenwich Mean Time, Western European Time</option>
                                                <option value="UP1">(UTC +1:00) Central European Time, West Africa Time</option>
                                                <option value="UP2" selected="selected">(UTC +2:00) Central Africa Time, Eastern European Time, Kaliningrad Time</option>
                                                <option value="UP3">(UTC +3:00) Moscow Time, East Africa Time</option>
                                                <option value="UP35">(UTC +3:30) Iran Standard Time</option>
                                                <option value="UP4">(UTC +4:00) Azerbaijan Standard Time, Samara Time</option>
                                                <option value="UP45">(UTC +4:30) Afghanistan</option>
                                                <option value="UP5">(UTC +5:00) Pakistan Standard Time, Yekaterinburg Time</option>
                                                <option value="UP55">(UTC +5:30) Indian Standard Time, Sri Lanka Time</option>
                                                <option value="UP575">(UTC +5:45) Nepal Time</option>
                                                <option value="UP6">(UTC +6:00) Bangladesh Standard Time, Bhutan Time, Omsk Time</option>
                                                <option value="UP65">(UTC +6:30) Cocos Islands, Myanmar</option>
                                                <option value="UP7">(UTC +7:00) Krasnoyarsk Time, Cambodia, Laos, Thailand, Vietnam</option>
                                                <option value="UP8">(UTC +8:00) Australian Western Standard Time, Beijing Time, Irkutsk Time</option>
                                                <option value="UP875">(UTC +8:45) Australian Central Western Standard Time</option>
                                                <option value="UP9">(UTC +9:00) Japan Standard Time, Korea Standard Time, Yakutsk Time</option>
                                                <option value="UP95">(UTC +9:30) Australian Central Standard Time</option>
                                                <option value="UP10">(UTC +10:00) Australian Eastern Standard Time, Vladivostok Time</option>
                                                <option value="UP105">(UTC +10:30) Lord Howe Island</option>
                                                <option value="UP11">(UTC +11:00) Magadan Time, Solomon Islands, Vanuatu</option>
                                                <option value="UP115">(UTC +11:30) Norfolk Island</option>
                                                <option value="UP12">(UTC +12:00) Fiji, Gilbert Islands, Kamchatka Time, New Zealand Standard Time</option>
                                                <option value="UP1275">(UTC +12:45) Chatham Islands Standard Time</option>
                                                <option value="UP13">(UTC +13:00) Phoenix Islands Time, Tonga</option>
                                                <option value="UP14">(UTC +14:00) Line Islands</option>   
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="datetime_format" class="control-label handle">Format*</label>
                                        <div class="controls">
                                            <select name="format" id="datetime_format" class="valid">
                                                <option value="12" class="time-input">12 Hours</option>
                                                <option value="24" class="time-input">24 Hours</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div id="datetime_type_container" class="control-group">
                                        <label for="datetime_type" class="control-label handle">Field Type*</label>
                                        <div class="controls">
                                            <select name="type" id="datetime_type" class="valid">
                                                <option value="time" selected>Time Only</option>
                                                <option value="date">Date Only</option>
                                                <option value="daterange">Date Range</option>
                                                <option value="datetime">Date &amp; Time</option>
                                                <option value="datetimerange">Date &amp; Time Range</option>
                                                <option value="timezone">Timezone</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group" id="datetime_db_type_container">
                                        <label for="datetime_db_type" class="control-label handle">Data Type*</label>
                                        <div class="controls">
                                            <select name="db_type" id="datetime_db_type" class="valid">
                                                <option class="time" value="time">Time</option>
                                                <option class="date" value="date">Date</option>
                                                <option class="datetime" value="datetime" selected>Datetime</option>
                                                <option class="timezone" value="varchar">Varchar</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label handle">Validations</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="required"> Required
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="trim"> Trim
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="xss_clean"> XSS Clean
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="datetime_show_list" class="control-label handle">Show on List</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="show_list" id="datetime_show_list" checked> Show on List
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="datetime_searchable" class="control-label handle">Searchable</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="searchable" id="datetime_searchable" type="checkbox"> Searchable
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="datetime_show_api" class="control-label handle">Show on API</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="show_api" id="datetime_show_api" checked> Show on API
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="datetime_icon" class="control-label handle">Use Icon</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="icon" id="datetime_icon" checked> Use Icon
                                            </label>
                                        </div> 
                                    </div>
                                    <div class="control-group">
                                        <label for="datetime_guideline" class="control-label handle">User Guideline</label>
                                        <div class="controls">
                                            <textarea name="guideline" id="datetime_guideline" row="5" data-rule-maxlength="255" placeholder="Type Here"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div id="datetime_modal_footer" class="modal-footer">
                            <button id="datetime_close_btn" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                            <button id="datetime_save_btn" class="btn btn-primary">Create Datetime Input</button>
                        </div>
                    </div>
                    
                    <!-- Single -->
                    <div id="single_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div id="single_modal_header" class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="single_modal_title">Dropdown Menu</h3>
                        </div>
                        <div id="single_modal_body" class="modal-body row-fluid">
                            <div class="alert alert-info">
                                <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                            </div>
                            <form id="single_form" action="<?= base_url() ?>generator/create_options" method="post" class='form-horizontal form-column form-bordered form-validate'>
                                <div class="span6">
                                    <div class="control-group">
                                        <label for="single_label" class="control-label handle">Label*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="label" id="single_label" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="Gender">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="single_field_name" class="control-label handle">Field Name*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="name" id="single_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="gender">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="single_id" class="control-label handle">Field ID*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="id" id="single_id" class="input-xlarge" data-rule-minlength="2" placeholder="gender">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="single_type_container" class="control-group">
                                        <label for="single_type" class="control-label handle">Field Type*</label>
                                        <div class="controls">
                                            <select name="type" id="single_type" class="valid span3">
                                                <option class="text" value="dropdown">Dropdown Menu</option>
                                                <option class="text" value="radio">Radio Buttons</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div id="single_with_search_container" class="control-group">
                                        <label for="single_with_search" class="control-label handle">With Search</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="with_search" id="single_with_search" checked> Use Search
                                            </label>
                                        </div>
                                    </div>
                                    <div id="single_with_image_container" class="control-group">
                                        <label for="single_with_image" class="control-label handle">With Image</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="with_image" id="single_with_image"> With Image
                                            </label>
                                        </div>
                                    </div>
                                    <div id="single_image_path_container" class="control-group has-image">
                                        <label for="single_image_path" class="control-label handle">Image Path*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="image_path" id="single_image_path" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="URL or Path" value="uploads/images/image_folder/">
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div id="single_data_container" class="control-group">
                                        <label for="single_data" class="control-label handle">Data*</label>
                                        <div class="controls">
                                            <select name="single_data" id="single_data" class="valid">
                                                <option class="text" value="custom">Custom Data</option>
                                                <option class="text" value="database">From a Database Table</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div id="single_custom_data_container" class="control-group">
                                        <label for="single_custom_data" class="control-label handle">Custom Data*</label>
                                        <div class="controls">
                                            <div class="data">
                                                <input type="text" id="single_selected_text" name="data[][text]" class="value input-xlarge" data-rule-required="true" data-rule-minlength="1" placeholder="Option Default Text" value="">
                                                <input type="text" id="single_selected_value" name="data[][value]" class="text input-xlarge" data-rule-required="true" data-rule-minlength="1" placeholder="Option Default Value" value="">
                                                <input type="text" id="single_selected_image" name="data[][image]" class="image input-xlarge has-image" data-rule-required="true" data-rule-minlength="1" placeholder="URL or path" value="uploads/images/folder/some_image.jpg">
                                                <a href="javascript:void(0)" class="btn btn-mini btn_add" rel="tooltip" title="Add Data Below"><i class="icon-plus"></i></a>
                                                <a href="javascript:void(0)" id="single_clear_btn" class="btn btn-mini btn_clear" rel="tooltip" title="Clear All Data"><i class="icon-trash"></i></a>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="single_db_table_name_container" class="control-group">
                                        <label for="single_db_table_name" class="control-label handle">DB Table Name*</label>
                                        <div class="controls">
                                            <input type="text" name="db_table_name" id="single_db_table_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="db_table">
                                        </div>
                                    </div>
                                    <div id="single_db_singular_container" class="control-group">
                                        <label for="single_db_singular" class="control-label handle">Singular Name*</label>
                                        <div class="controls">
                                            <input type="text" name="db_singular" id="single_db_singular" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="item">
                                        </div>
                                    </div>
                                    <div id="single_db_plural_container" class="control-group">
                                        <label for="single_db_plural" class="control-label handle">Plural Name*</label>
                                        <div class="controls">
                                            <input type="text" name="db_plural" id="single_db_plural" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="items">
                                        </div>
                                    </div>
                                    <div id="single_db_foreign_key_container" class="control-group">
                                        <label for="single_db_foreign_key" class="control-label handle">Foreign Key*</label>
                                        <div class="controls">
                                            <input type="text" name="foreign_key" id="single_db_foreign_key" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="item_id">
                                        </div>
                                    </div>
                                    <div id="single_db_table_value_container" class="control-group">
                                        <label for="single_db_table_attribute_value" class="control-label handle">Attribute Value*</label>
                                        <div class="controls">
                                            <input type="text" name="db_table_value" id="single_db_table_value" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="id">
                                        </div>
                                    </div>

                                    <div id="single_db_table_text_container" class="control-group">
                                        <label for="single_db_table_text" class="control-label handle">Attribute Text*</label>
                                        <div class="controls">
                                            <input type="text" name="db_table_text" id="single_db_table_text" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="gender">
                                        </div>
                                    </div>
                                    <div id="single_db_table_image_container" class="control-group has-image">
                                        <label for="single_db_table_image" class="control-label handle">Attribute Image*</label>
                                        <div class="controls">
                                            <input type="text" name="db_table_image" id="single_db_table_image" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="photo">
                                        </div>
                                    </div>
                                </div>
                        
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label handle">Validations</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="required"> Required
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="trim"> Trim
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="xss_clean"> XSS Clean
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" value="valid_emails"> Valid Email
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" value="valid_numbers"> Valid Number
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" value="valid_urls"> Valid URL
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="single_show_list" class="control-label handle">Show on List</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="show_list" id="single_show_list" type="checkbox" checked> Show on List
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="single_searchable" class="control-label handle">Searchable</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="searchable" id="single_searchable" type="checkbox" checked> Searchable
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="single_show_api" class="control-label handle">Show on API</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="show_api" id="single_show_api" type="checkbox" checked> Show on API
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="single_guideline" class="control-label handle">User Guideline</label>
                                        <div class="controls">
                                            <textarea name="guideline" id="single_guideline" row="5" data-rule-maxlength="255" placeholder="Type Here"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div id="single_modal_footer" class="modal-footer">
                            <button id="single_close_btn" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                            <button id="single_save_btn" class="btn btn-primary">Create Dropdown Menu</button>
                        </div>
                    </div>

                    <!-- Multiple -->
                    <div id="multiple_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div id="multiple_modal_header" class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="multiple_modal_title">Multiple</h3>
                        </div>
                        <div id="multiple_modal_body" class="modal-body row-fluid">
                            <div class="alert alert-info">
                                <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                            </div>
                            <form id="multiple_form" action="<?= base_url() ?>generator/create_options" method="post" class='form-horizontal form-column form-bordered form-validate'>

                                    <div class="control-group">
                                        <label for="multiple_label" class="control-label handle">Label*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="label" id="multiple_label" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="File Types">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="multiple_field_name" class="control-label handle">Field Name*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="name" id="multiple_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="file_types">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="multiple_id" class="control-label handle">Field ID*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="id" id="multiple_id" class="input-xlarge" data-rule-minlength="2" placeholder="file_types">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="multiple_type_container" class="control-group">
                                        <label for="multiple_type" class="control-label handle">Field Type*</label>
                                        <div class="controls">
                                            <select name="type" id="multiple_type" class="valid">
                                                <option class="text" value="multiple_dropdown">Dropdown Menu</option>
                                                <option class="text" value="checkbox">Check Boxes</option>
                                                <option class="text" value="tagsinput">Tagsinput</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div id="multiple_default_values_container" class="control-group">
                                        <label for="multiple_default_values" class="control-label handle">Default Values</label>
                                        <div class="controls">
                                            <input type="text" name="default_values" id="multiple_default_values" class="tagsinput" value="jpg,png,gif">
                                        </div>
                                    </div>
                                    
                                    <div id="multiple_with_image_container" class="control-group">
                                        <label for="multiple_with_image" class="control-label handle">With Image</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="with_image" id="multiple_with_image"> With Image
                                            </label>
                                        </div>
                                    </div>
                                    <div id="multiple_image_path_container" class="control-group multiple-has-image">
                                        <label for="multiple_image_path" class="control-label handle">Image Path*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="image_path" id="multiple_image_path" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="URL or Path" value="uploads/images/image_folder/">
                                            </div>
                                        </div>
                                    </div>
                                
                                    <div id="multiple_data_container" class="control-group">
                                        <label for="multiple_data" class="control-label handle">Data</label>
                                        <div class="controls">
                                            <select name="multiple_data" id="multiple_data" class="valid">
                                                <option class="text" value="custom">Custom Data</option>
                                                <option class="text" value="database">From a Database Table</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div id="multiple_custom_data_container" class="control-group">
                                        <label for="multiple_custom_data" class="control-label handle">Custom Data</label>
                                        <div class="controls">
                                            <div class="data">
                                                <input type="text" id="multiple_selected_text" name="data[][text]" class="value input-xlarge" data-rule-required="true" data-rule-minlength="1" placeholder="Option Default Text" value="">
                                                <input type="text" id="multiple_selected_value" name="data[][value]" class="text input-xlarge" data-rule-required="true" data-rule-minlength="1" placeholder="Option Default Value" value="">
                                                <input type="text" id="multiple_selected_image" name="data[][image]" class="image input-xlarge multiple-has-image" data-rule-required="true" data-rule-minlength="1" placeholder="URL or path" value="uploads/images/folder/some_image.jpg">
                                                <a href="javascript:void(0)" class="btn btn-mini btn_add" rel="tooltip" title="Add Data Below"><i class="icon-plus"></i></a>
                                                <a href="javascript:void(0)" id="multiple_clear_btn" class="btn btn-mini btn_clear" rel="tooltip" title="Clear All Data"><i class="icon-trash"></i></a>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="multiple_db_table_name_container" class="control-group">
                                        <label for="multiple_db_table_name" class="control-label handle">DB Table Name</label>
                                        <div class="controls">
                                            <input type="text" name="db_table_name" id="multiple_db_table_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="db_table">
                                        </div>
                                    </div>
                                    <div id="multiple_db_singular_container" class="control-group">
                                        <label for="multiple_db_singular" class="control-label handle">Singular Name</label>
                                        <div class="controls">
                                            <input type="text" name="db_singular" id="multiple_db_singular" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="item">
                                        </div>
                                    </div>
                                    <div id="multiple_db_plural_container" class="control-group">
                                        <label for="multiple_db_plural" class="control-label handle">Plural Name</label>
                                        <div class="controls">
                                            <input type="text" name="db_plural" id="multiple_db_plural" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="items">
                                        </div>
                                    </div>
                                    <div id="multiple_db_foreign_key_container" class="control-group">
                                        <label for="multiple_db_foreign_key" class="control-label handle">Foreign Key</label>
                                        <div class="controls">
                                            <input type="text" name="foreign_key" id="multiple_db_foreign_key" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="item_id">
                                        </div>
                                    </div>
                                    <div id="multiple_db_table_value_container" class="control-group">
                                        <label for="multiple_db_table_attribute_value" class="control-label handle">Attribute Value</label>
                                        <div class="controls">
                                            <input type="text" name="db_table_value" id="multiple_db_table_value" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="id">
                                        </div>
                                    </div>
                                    <div id="multiple_db_table_text_container" class="control-group">
                                        <label for="multiple_db_table_text" class="control-label handle">Attribute Text</label>
                                        <div class="controls">
                                            <input type="text" name="db_table_text" id="multiple_db_table_text" class="input-xlarge" data-rule-minlength="2" placeholder="gender">
                                        </div>
                                    </div>
                                    <div id="multiple_db_table_image_container" class="control-group multiple-has-image">
                                        <label for="multiple_db_table_image" class="control-label handle">Attribute Image*</label>
                                        <div class="controls">
                                            <input type="text" name="db_table_image" id="multiple_db_table_image" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="photo">
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label handle">Validations</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="required"> Required
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="trim"> Trim
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="xss_clean"> XSS Clean
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" value="valid_emails"> Valid Email
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" value="valid_numbers"> Valid Number
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" value="valid_urls"> Valid URL
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="multiple_show_list" class="control-label handle">Show on List</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="show_list" id="multiple_show_list" type="checkbox" checked> Show on List
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="multiple_searchable" class="control-label handle">Searchable</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="searchable" id="multiple_searchable" type="checkbox" checked> Searchable
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="multiple_show_api" class="control-label handle">Show on API</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="show_api" id="multiple_show_api" type="checkbox" checked> Show on API
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="multiple_guideline" class="control-label handle">User Guideline</label>
                                        <div class="controls">
                                            <textarea name="guideline" id="multiple_guideline" row="5" data-rule-maxlength="255" placeholder="Type Here"></textarea>
                                        </div>
                                    </div>
                                
                            </form>

                        </div>
                        <div id="multiple_modal_footer" class="modal-footer">
                            <button id="multiple_close_btn" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                            <button id="multiple_save_btn" class="btn btn-primary">Create Multiple Input</button>
                        </div>
                    </div>
                    
                    <!-- Upload -->
                    <div id="upload_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div id="upload_modal_header" class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="upload_modal_title">Upload</h3>
                        </div>
                        <div id="upload_modal_body" class="modal-body row-fluid">
                            <div class="alert alert-info">
                                <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                            </div>
                            <form id="upload_form" action="<?= base_url() ?>contact/update" method="post" class='form-horizontal form-column form-bordered form-validate'>
                                <div class="span6">
                                    <div class="control-group">
                                        <label for="upload_label" class="control-label handle">Label*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="label" id="upload_label" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="File">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="upload_name" class="control-label handle">Field Name*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="name" id="upload_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="file">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="upload_id" class="control-label handle">Field ID*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="id" id="upload_id" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="file">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="upload_location" class="control-label handle">Location*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-folder-open-alt"></i></span>
                                                <input type="text" name="location" id="upload_location" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="uploads/images/folder_name" value="uploads/images/folder_name">
                                            </div>
                                        </div>
                                    </div>

                                    <div id="upload_type_container" class="control-group">
                                        <label for="upload_type" class="control-label handle">Field Type</label>
                                        <div class="controls">
                                            <select name="type" id="upload_type" class="valid">
                                                <option value="upload_image" selected>Image Uploader</option>
                                                <option value="upload_url">URL or Image Uploader</option>
                                                <option value="upload_file">File Uploader</option>
                                                <option value="upload_multiple">Multiple Files Uploader</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="upload_filetypes" class="control-label handle">File Types</label>
                                        <div class="controls">
                                            <input type="text" name="filetypes" id="upload_filetypes" class="tagsinput" value="jpg,png,gif">
                                        </div>
                                    </div>
                                </div>
                        
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label handle">Validations</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="required"> Required
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="trim"> Trim
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="xss_clean"> XSS Clean
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="upload_show_list" class="control-label handle">Show on List</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="show_list" id="upload_show_list" checked> Show on List
                                            </label>
                                        </div>
                                    </div>
                                    <div id="upload_show_api" class="control-group">
                                        <label for="upload_show_api" class="control-label handle">Show on API</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="show_api" id="upload_show_api" checked value="show_on_list"> Show on API
                                            </label>
                                        </div>
                                    </div>
                                    <div id="upload_icon_container" class="control-group">
                                        <label for="upload_icon" class="control-label handle">Use Icon</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="icon" id="upload_icon" checked> Use Icon
                                            </label>
                                        </div>
                                    </div>
                                    <div id="upload_resize_container" class="control-group">
                                        <label for="upload_resize" class="control-label handle">Resize</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="resize" id="upload_resize" type="checkbox"> Resize Images
                                            </label>
                                        </div>
                                    </div>
                                    <div id="upload_width_container" class="control-group">
                                        <label for="upload_width" class="control-label handle">Width</label>
                                        <div class="controls">
                                            <input type="text" name="width" id="upload_width" class="input-xlarge" data-rule-required="true" data-rule-minlength="1" data-rule-maxlength="5" value="" placeholder="480" value="480">
                                        </div>
                                    </div>
                                    <div id="upload_height_container"  class="control-group">
                                        <label for="upload_height" class="control-label handle">Height</label>
                                        <div class="controls">
                                            <input type="text" name="height" id="upload_height" class="input-xlarge" data-rule-required="true" data-rule-minlength="1" data-rule-maxlength="5" value="" placeholder="320" value="320">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="upload_guideline" class="control-label handle">User Guideline</label>
                                        <div class="controls">
                                            <textarea name="guideline" id="upload_guideline" row="5" data-rule-maxlength="255" placeholder="Type Here"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div id="upload_modal_footer" class="modal-footer">
                            <button id="upload_close_btn" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                            <button id="upload_save_btn" class="btn btn-primary">Create Upload Input</button>
                        </div>
                    </div>
                    
                    <!-- Color -->
                    <div id="color_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div id="color_modal_header" class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="color_modal_title">Color</h3>
                        </div>
                        <div id="color_modal_body" class="modal-body row-fluid">
                            <div class="alert alert-info">
                                <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                            </div>
                            <form id="color_form" action="<?= base_url() ?>contact/update" method="post" class='form-horizontal form-column form-bordered form-validate'>
                                <input type="hidden" name="type" id="color_type" value="color">
                                <input type="hidden" name="db_type" id="color_db_type" value="varchar">
                                <div class="span6">
                                    <div class="control-group">
                                        <label for="color_label" class="control-label handle">Label*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="label" id="color_label" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="Color">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="color_name" class="control-label handle">Field Name*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="name" id="color_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="color">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="color_id" class="control-label handle">Field ID*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="id" id="color_id" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="color">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="color_placeholder" class="control-label handle">Placeholder</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="placeholder" id="color_placeholder" class="input-xlarge" data-rule-minlength="2" placeholder="#ffffff" value="#ffffff">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="color_initial_value" class="control-label handle">Initial Value</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-tint"></i></span>
                                                <input type="text" name="initial_value" id="color_initial_value" class="input-xlarge colorpick" data-rule-minlength="2" placeholder="#ffffff">
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="control-group">
                                        <label for="color_format" class="control-label handle">Format*</label>
                                        <div class="controls">
                                            <select name="format" id="color_format" class="valid">
                                                <option class="text" value="hex">Hex - #ffffff</option>
                                                <option class="text" value="rgb">RGB - rgb(255,255,255)</option>
                                                <option class="text" value="rgba">RGBA - rgba(255,255,255,0.50)</option>
                                                <option class="text" value="hsl">HSL - hsl(255,57%,35%)</option>
                                                <option class="text" value="hsla">HSLA - hsla(255,57%,35%,0.50)</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                    
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label handle">Validations</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="required"> Required
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="trim"> Trim
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="xss_clean"> XSS Clean
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="color_show_list" class="control-label handle">Show on List</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="show_list" id="color_show_list" checked> Show on List
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="color_show_api" class="control-label handle">Show on API</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="show_api" id="color_show_api" checked> Show on API
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="color_searchable" class="control-label handle">Searchable</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="searchable" id="color_searchable" type="checkbox"> Searchable
                                            </label>
                                        </div>
                                    </div>
                                    <div id="color_icon_container" class="control-group">
                                        <label for="color_icon" class="control-label handle">Use Icon</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input id="color_icon" name="icon" type="checkbox" checked> Use Icon
                                            </label>
                                        </div>
                                    </div>
                                    <div id="change_color_icon_container" class="control-group">
                                        <label for="change_color_icon" class="control-label handle">Change Icon</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="change_icon" id="change_color_icon" class="input-xlarge" data-rule-minlength="1" value="" placeholder=" &lt;i class='icon-tint'&gt;&lt;/i&gt; or $">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="color_guideline" class="control-label handle">User Guideline</label>
                                        <div class="controls">
                                            <textarea name="guideline" id="color_guideline" row="5" data-rule-maxlength="255" placeholder="Type Here"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div id="color_modal_footer" class="modal-footer">
                            <button id="color_close_btn" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                            <button id="color_save_btn" class="btn btn-primary">Create Color Input</button>
                        </div>
                    </div>
                    
                    <!-- Geolocation -->
                    <div id="geolocation_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div id="geolocation_modal_header" class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="geolocation_modal_title">Geolocation</h3>
                        </div>
                        <div id="geolocation_modal_body" class="modal-body row-fluid">
                            <div class="alert alert-info">
                                <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                            </div>
                            <form id="geolocation_form" action="<?= base_url() ?>contact/update" method="post" class='form-horizontal form-column form-bordered form-validate'>
                                <input type="hidden" name="type" id="corlo_type" value="geolocation">
                                <input type="hidden" name="db_type" id="corlo_type" value="varchar">
                                <div class="span6">
                                    <div class="control-group">
                                        <label for="geolocation_label" class="control-label handle">Label*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="label" id="geolocation_label" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="Location">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="geolocation_name" class="control-label handle">Field Name*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="name" id="geolocation_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="location">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="geolocation_id" class="control-label handle">Field ID*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="id" id="geolocation_id" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="location">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label for="geolocation_placeholder" class="control-label handle">Placeholder</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="placeholder" id="geolocation_placeholder" class="input-xlarge" data-rule-minlength="1" value="" placeholder="#143 Purok 15, Irisan Baguio City">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="geolocation_initial_value" class="control-label handle">Initial Value</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="initial_value" id="geolocation_initial_value" class="input-xlarge" data-rule-minlength="1" value="" placeholder="#143 Purok 15, Irisan Baguio City">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="geolocation_initial_longitude" class="control-label handle">Initial Longitude*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="initial_longitude" id="geolocation_initial_longitude" class="input-xlarge" data-rule-required="true" data-rule-minlength="1" placeholder="120.61758366806225" value="120.61758366806225">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label for="geolocation_initial_latitude" class="control-label handle">Initial Latitude*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="initial_latitude" id="geolocation_initial_latitude" class="input-xlarge" data-rule-required="true" data-rule-minlength="1" placeholder="16.413640135538014" value="16.413640135538014">
                                            </div>
                                        </div>
                                    </div>
                                </div>    
                        
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label handle">Validations</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="required"> Required
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="trim"> Trim
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="xss_clean"> XSS Clean
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="geolocation_show_list" class="control-label handle">Show on List</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="show_list" id="geolocation_show_list" checked> Show on List
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="geolocation_show_api" class="control-label handle">Show on API</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="show_api" id="geolocation_show_api" checked> Show on API
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="geolocation_searchable" class="control-label handle">Searchable</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="searchable" id="geolocation_searchable" type="checkbox" checked> Searchable
                                            </label>
                                        </div>
                                    </div>
                                    <div id="gelocation_iconcontainer" class="control-group">
                                        <label for="geolocation_icon" class="control-label handle">Use Icon</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="icon" id="geolocation_icon" type="checkbox" checked> Use Icon
                                            </label>
                                        </div>
                                    </div>
                                    <div id="gelocation_location_icon_container" class="control-group">
                                        <label for="location_icon" class="control-label handle">Location Icon</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="location_icon" id="location_icon" class="input-xlarge" data-rule-minlength="1" value="" placeholder=" &lt;i class='icon-pushpin'&gt;&lt;/i&gt; or $">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="gelocation_longitude_icon_container" class="control-group">
                                        <label for="longitude_icon" class="control-label handle">Longitude Icon</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="longitude_icon" id="longitude_icon" class="input-xlarge" data-rule-minlength="1" value="" placeholder=" &lt;i class='icon-pushpin'&gt;&lt;/i&gt; or $">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="gelocation_latitude_icon_container" class="control-group">
                                        <label for="latitude_icon" class="control-label handle">Latitude Icon</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="latitude_icon" id="latitude_icon" class="input-xlarge" data-rule-minlength="1" value="" placeholder=" &lt;i class='icon-pushpin'&gt;&lt;/i&gt; or $">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="gelocation_guideline" class="control-label handle">User Guideline</label>
                                        <div class="controls">
                                            <textarea name="guideline" id="gelocation_guideline" row="5" data-rule-maxlength="255" placeholder="Type Here"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div id="geolocation_modal_footer" class="modal-footer">
                            <button id="geolocation_close_btn" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                            <button id="geolocation_save_btn" class="btn btn-primary">Create Geolocation Input</button>
                        </div>
                    </div>
                    
                    <!-- Toggle -->
                    <div id="toggle_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div id="toggle_modal_header" class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="toggle_modal_title">Toggle</h3>
                        </div>
                        <div id="toggle_modal_body" class="modal-body row-fluid">
                            <div class="alert alert-info">
                                <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                            </div>
                            <form id="toggle_form" action="<?= base_url() ?>contact/update" method="post" class='form-horizontal form-column form-bordered form-validate'>
                                <input type="hidden" name="type" id="toggle_type" value="toggle">
                                <input type="hidden" name="db_type" id="toggle_db_type" value="boolean">
                                <div class="span6">
                                    <div class="control-group">
                                        <label for="toggle_label" class="control-label handle">Label*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="label" id="toggle_label" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="Toggle">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="toggle_name" class="control-label handle">Field Name*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="name" id="toggle_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="toggle">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="toggle_id" class="control-label handle">Field ID*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="id" id="toggle_id" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="toggle">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="switch_container" class="control-group">
                                        <label for="switch" class="control-label" rel="popover" data-trigger="hover" title="Switch" data-placement="top" data-content="Toggle to use switch.">
                                            Switch
                                        </label>
                                        <div class="controls">
                                            <input type="checkbox" name="switch" id="switch" class="switch has-switch" data-on-text="YES" data-off-text="NO" value="yes">
                                        </div>
                                    </div>
                                    <div id="switch_on_container" class="control-group">
                                        <label for="switch_on" class="control-label handle">Switch ON*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="switch_on" id="switch_on" class="input-xlarge" data-rule-required="true" data-rule-minlength="1" data-rule-maxlength="10" placeholder="yes" value="yes">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="switch_off_container" class="control-group">
                                        <label for="switch_off" class="control-label handle">Switch OFF*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="switch_off" id="switch_off" class="input-xlarge" data-rule-required="true" data-rule-minlength="1" data-rule-maxlength="10" placeholder="no" value="no">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                    
                                <div class="span6">
                                    <div class="control-group">
                                        <label class="control-label handle">Validations</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="required"> Required
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="trim"> Trim
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="xss_clean"> XSS Clean
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="toggle_show_list" class="control-label handle">Show on List</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="show_list" id="toggle_show_list" checked> Show on List
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="toggle_show_api" class="control-label handle">Show on API</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input type="checkbox" name="show_api" id="toggle_show_api" checked> Show on API
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="toggle_searchable" class="control-label handle">Searchable</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="searchable" id="toggle_searchable" type="checkbox"> Searchable
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="toggle_guideline" class="control-label handle">User Guideline</label>
                                        <div class="controls">
                                            <textarea name="guideline" id="toggle_guideline" row="5" data-rule-maxlength="255" placeholder="Type Here"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div id="toggle_modal_footer" class="modal-footer">
                            <button id="toggle_close_btn" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                            <button id="toggle_save_btn" class="btn btn-primary">Create Toggle Input</button>
                        </div>
                    </div>
                    
                    <!-- Captcha -->
                    <div id="captcha_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div id="captcha_modal_header" class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="captcha_modal_title">Captcha</h3>
                        </div>
                        <div id="captcha_modal_body" class="modal-body row-fluid">
                            <div class="alert alert-info">
                                <i class="icon-info-sign icon-large"></i> Fields marked with <code>*</code> are required.
                            </div>
                            <form id="captcha_form" action="<?= base_url() ?>contact/update" method="post" class='form-horizontal form-column form-bordered form-validate'>
                                <input type="hidden" name="type" id="captcha_type" value="captcha">
                                <input type="hidden" name="db_type" id="captcha_db_type" value="boolean">
                                <div class="span6">
                                    <div class="control-group">
                                        <label for="captcha_label" class="control-label handle">Label*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="label" id="captcha_label" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="Captcha">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="captcha_name" class="control-label handle">Field Name*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="name" id="captcha_name" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" value="" placeholder="captcha">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="captcha_id" class="control-label handle">Field ID*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="id" id="captcha_id" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="captcha">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="captcha_placeholder" class="control-label handle">Placeholder</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="placeholder" id="captcha_placeholder" class="input-xlarge" data-rule-minlength="1" placeholder="Type what you see above" value="Type what you see above">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="captcha_length_container" class="control-group">
                                        <label for="captcha_length" class="control-label handle">Length*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="captcha_length" id="captcha_length" class="input-xlarge" data-rule-required="true" data-rule-minlength="1" data-rule-maxlength="10" data-rule-number="true" placeholder="6" value="6">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="captcha_location" class="control-label handle">Location*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-folder-open-alt"></i></span>
                                                <input type="text" name="location" id="captcha_location" class="input-xlarge" data-rule-required="true" data-rule-minlength="2" placeholder="uploads/images/captchas" value="uploads/images/captchas">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                    
                                <div class="span6">
                                    <div id="captcha_expiration_container" class="control-group">
                                        <label for="captcha_expiration" class="control-label handle">Expiration (Seconds)*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="captcha_expiration" id="captcha_expiration" class="input-xlarge" data-rule-required="true" data-rule-minlength="1" data-rule-maxlength="10" data-rule-number="true" placeholder="900" value="900">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="captcha_width_container" class="control-group">
                                        <label for="captcha_width" class="control-label handle">Width*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="captcha_width" id="captcha_width" class="input-xlarge" data-rule-required="true" data-rule-minlength="1" data-rule-maxlength="10" data-rule-number="true" placeholder="300" value="300">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="captcha_height_container" class="control-group">
                                        <label for="captcha_height" class="control-label handle">Height*</label>
                                        <div class="controls">
                                            <div class="input-append input-prepend">
                                                <span class="add-on"><i class="icon-edit"></i></span>
                                                <input type="text" name="captcha_height" id="captcha_height" class="input-xlarge" data-rule-required="true" data-rule-minlength="1" data-rule-maxlength="10" data-rule-number="true" placeholder="100" value="100">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label handle">Validations</label>
                                        <div class="controls">
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="trim"> Trim
                                            </label>
                                            <label class="checkbox">
                                                <input name="validations[]" type="checkbox" checked value="xss_clean"> XSS Clean
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="captcha_guideline" class="control-label handle">User Guideline</label>
                                        <div class="controls">
                                            <textarea name="guideline" id="captcha_guideline" row="5" data-rule-maxlength="255" placeholder="Type Here"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div id="captcha_modal_footer" class="modal-footer">
                            <button id="captcha_close_btn" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                            <button id="captcha_save_btn" class="btn btn-primary">Create Captcha Input</button>
                        </div>
                    </div>
                    

                </div>
                <script src="<?= base_url() ?>js/plugins/serializejson/jquery.serializeJSON.min.js"></script>
                <script src="<?= base_url() ?>js/cms/generator.js"></script>
            </div>